<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drible</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- header======header======header======header======header======header======header====== -->
    <header>
        <div class="ccc">
            <div class="left fl">
                <i class="logo fl"></i>
                <ul class="fl">
                    <li class="fl cur">
                        <a href="#">Shots</a>
                        <ul class="sub">
                            <li><a href="">Popular Designers</a></li>
                            <li><a href="">Find Friends</a></li>
                            <li><a href="">The three</a></li>
                            <li><a href="">The four</a></li>
                        </ul>
                    </li>
                    <li class="fl">
                        <a href="#">Designers</a>
                        <ul class="sub">
                            <li><a href="">Popular Designers</a></li>
                            <li><a href="">Find Friends</a></li>
                            <li><a href="">The three</a></li>
                            <li><a href="">The four</a></li>
                        </ul>
                    </li>
                    <li class="fl">
                        <a href="#">Teams</a>
                        <ul class="sub">
                            <li><a href="">Popular Designers</a></li>
                            <li><a href="">Find Friends</a></li>
                            <li><a href="">The three</a></li>
                            <li><a href="">The four</a></li>
                        </ul>
                    </li>
                    <li class="fl">
                        <a href="#">Community</a>
                        <ul class="sub">
                            <li><a href="">Popular Designers</a></li>
                            <li><a href="">Find Friends</a></li>
                            <li><a href="">The three</a></li>
                            <li><a href="">The four</a></li>
                        </ul>
                    </li>
                    <li class="fl">
                        <a href="#">Jobs</a>
                        <ul class="sub">
                            <li><a href="">Popular Designers</a></li>
                            <li><a href="">Find Friends</a></li>
                            <li><a href="">The three</a></li>
                            <li><a href="">The four</a></li>
                        </ul>
                    </li>
                    <li class="fl">
                        <a href="#">
                            <i class="fa fa-ellipsis-h"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="right fr">
                <ul class="fr">
                    <li class="fr">
                        <form action="index.html" method="post" >
                            <input type="text" value="" placeholder="search" name="">
                        </form>
                    </li>
                    <li class="fr ico">
                        <i class="fa fa-upload"></i>
                    </li>
                    <li class="fr ico">
                        <i class="fa fa-bell"></i>
                    </li>
                    <li class="fr ico">
                        <i class="fa fa-envelope-open"></i>
                    </li>
                    <li class="fr ico">
                        <i class="fa fa-user-circle"></i>
                    </li>
                    <li class="fr">Get more out of dribble</li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 小屏幕header=======小屏幕header=======小屏幕header=======小屏幕header=======小屏幕header======= -->
    <div class="header-mobile">
        <i class="fa fa-list-ul"></i>
        <i class="logo"></i>
        <span class="user">Sign in</span>
        <div class="slider">
            <input class="search" type="text" placeholder="search">
            <div class="nav-item">
                <a>Shots</a>
                <span>></span>
            </div>
            <div class="nav-item">
                <a>Designers</a>
                <span>></span>
            </div>
            <div class="nav-item">
                <a>Teams</a>
                <span>></span>
            </div>
            <div class="nav-item">
                <a>Community</a>
                <span>></span>
            </div>
            <div class="nav-item">
                <a>Jobs</a>
                <span>></span>
            </div>
        </div>
    </div>
    <!--  -->
    <div class="part01">
        <p>
            <span>What are you working on?</span>
            <span>Dribbble is where designers get inspired and hired.</span>
        </p>
        <button>Continue →</button>
    </div>
    <div class="part02">
        <span>Looking to hire a designer? </span>
        <a href="#">Learn more</a>
    </div>
    <!-- header02======header02======header02======header02======header02======header02====== -->
    <div class="header02">
        <a href="" class="cur">Following</a>
        <a href="#">Activity</a>
        <a href="#">Suggestions</a>
        <a href="#">Find friends</a>
        <i class="fa fa-th-large"></i>
    </div>
    <!-- 内容部分======内容部分======内容部分======内容部分======内容部分======内容部分====== -->
    <div class="center"></div>
    <div class="more">Sign up to continue</div>
    <footer>
        <div class="container">
            <div class="item col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="#" class="logo"></a>
                <h5>Show and tell for designers</h5>
                <p>What are you working on? Dribbble is a community of designers sharing </p>
                <p>screenshots of their work, process, and projects.</p>
                <div class="logos">
                    <i class="fa fa-cc-visa"></i>
                    <i class="fa fa-chrome"></i>
                    <i class="fa fa-android"></i>
                    <i class="fa fa-btc"></i>
                    <i class="fa fa-css3"></i>
                </div>
                <p>© 2018 Dribbble. All rights reserved.</p>
            </div>
            <div class="item col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <h3>Dribbble</h3>
                <ul>
                    <a src="#">about</a>
                    <a src="#">Help</a>
                    <a src="#">Contact</a>
                    <a src="#">Careers</a>
                    <a src="#">Terms</a>
                    <a src="#">Guideanes</a>
                    <a src="#">Privacy</a>
                </ul>
                <ul>
                    <a src="#">Shop</a>
                    <a src="#">Testimonials</a>
                    <a src="#">Brand</a>
                    <a src="#">Advertise</a>
                    <a src="#">API</a>
                    <a src="#">Integrations</a>
                    <a src="#">iOS App</a>
                </ul>
                <p>Made with ♥ remotely from</p>
            </div>
            <div class="item col-lg-2 col-md-2 col-sm-6 col-xs-12">
                <h3>Jobs for Designers</h3>
                <div class="card">
                    <img src="https://cdn.dribbble.com/users/1513018/avatars/normal/2ba792ba849f61b9dbf239a5efbb5cea.png?1481665161" alt="">
                    <h5>Markforged</h5>
                    <p>Designer</p>
                </div>
                <div class="card">
                    <img src="https://cdn.dribbble.com/users/1102230/avatars/normal/52053d816aec10ac8608af564476f076.jpg?1486465290" alt="">
                    <h5>Markforged</h5>
                    <p>Designer</p>
                </div>
                <div class="card">
                    <img src="https://cdn.dribbble.com/assets/icon-edit-button-8d0f2493aa649d9e18d5cf27ee32c93aaa6488ddda85b481f6ca341b85fde845.png" alt="">
                    <h5>Markforged</h5>
                    <p>Designer</p>
                </div>
            </div>
            <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="card01">
                    <p>Season 2 of Dribbble's Overtime podcast is here! Listen now!</p>
                    <h3>ads via Carbon</h3>
                </div>
                <div class="card02">
                    <h3>1,165,286,841,828</h3>
                    <p>pixels dribbbled</p>
                </div>
            </div>
        </div>
    </footer>
</body>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>
</html>